<template>
  <u-popup :closeOnClickOverlay="false" mode="center" :show="show">
    <view class="up-box">
      <image
        src="../../assets/images/setting/up-head.png"
        mode="scaleToFill"
        class="head-img"
      />
      <text class="ver">V{{ updateInfo.versionNumber || "1.0.0" }}</text>
      <template v-if="!percent">
        <view class="tip">
          <view class="title">更新内容</view>
          <view class="text">{{ updateInfo.promptMessage }}</view>
        </view>
        <view class="btns">
          <view class="btn active-btn" @click="onUpdate">立即更新</view>
          <view class="cancel-btn flex flex-a-c" @click="$emit('close')">
            暂不更新
          </view>
        </view>
      </template>
      <view v-else class="progress">
        <canvas
          canvas-id="circleCanvas"
          style="width: 180px; height: 180px"
        ></canvas>
        <view class="ani flex flex-c">
          <image src="../../assets/images/setting/plane.png" class="plane" />
          <view class="lines flex">
            <text class="line line-1"></text>
            <text class="line line-2"></text>
            <text class="line line-3"></text>
          </view>
        </view>
        <view v-if="percent != 1" class="tip">更新中，请稍候...</view>
        <view v-else class="tip" @click="$emit('close')">取消</view>
      </view>
      <!-- <view v-if="percent">{{ percent }}%</view>
      <view class="update-type flex flex-bt">
        <text class="cancel" @click="$emit('close')">下次再说</text>
        <text class="update" v-if="percent != 100" @click="onUpdate"
          >立即下载</text
        >
        <text class="update" v-else @click="onInstall">立即安装</text>
      </view> -->
    </view>
  </u-popup>
</template>
<script>
import {brandMap} from '../../assets/utils/version'
export default {
  name: "aupdateApp",
  components: {
  },
  props: {
    show: Boolean,
    updateInfo: {
      type: Object,
      default: () => {},
    },
  },
  onShow: function () {
    console.log("update Show");
  },
  data() {
    return {
      filename: null,
      percent: 0,
    };
  },
  mounted() {
    console.log(
      "uni.getLaunchOptionsSync().scene",
      uni.getLaunchOptionsSync().scene
    );
  },
  watch: {
    show(val) {
      console.log("更新信息：", this.updateInfo);
      if (!val) {
        this.$nextTick(() => {
          this.percent = 0;
        });
      }
    },
  },
  computed: {},
  methods: {
    drawCircle(progress) {
      const ctx = uni.createCanvasContext("circleCanvas", this);
      const x = 90; // 圆心的x坐标
      const y = 90; // 圆心的y坐标
      const radius = 80; // 圆的半径

      // 绘制底色圆环
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.setLineWidth(10);
      ctx.setStrokeStyle("#e5e5e5");
      ctx.stroke();
      // 绘制进度圆环
      ctx.beginPath();
      ctx.lineCap = "round";
      ctx.arc(x, y, radius, -0.5 * Math.PI, (-0.5 + progress * 2) * Math.PI);
      ctx.setLineWidth(13);
      var my_gradient = ctx.createLinearGradient(0, 0, 200, 0);
      my_gradient.addColorStop(1, "#8760ff");
      my_gradient.addColorStop(0, "#436af3");
      ctx.strokeStyle = my_gradient;
      ctx.stroke();
      ctx.draw();
    },
    onInstallListening() {
      let _this = this;
      let mainActivity = plus.android.runtimeMainActivity(); //获取activity
      //生成广播接收器
      let receiver = plus.android.implements(
        "io.dcloud.android.content.BroadcastReceiver",
        {
          onReceive: (context, intent) => {
            //接收广播回调
            plus.android.importClass(intent);
            mainActivity.unregisterReceiver(receiver); //取消监听
            console.log("安装完成");
            _this.$emit("close");
            plus.runtime.restart();
          },
        }
      );
      let IntentFilter = plus.android.importClass(
        "android.content.IntentFilter"
      );
      let Intent = plus.android.importClass("android.content.Intent");
      let filter = new IntentFilter();
      filter.addAction(Intent.ACTION_PACKAGE_ADDED); //监听APP安装
      filter.addDataScheme("package");
      mainActivity.registerReceiver(receiver, filter); //注册广播
    },
    onInstall() {
      this.onInstallListening();
      plus.runtime.install(
        plus.io.convertLocalFileSystemURL(this.filename),
        {},
        () => {
          //成功跳转到安装界面
          console.log("开始安装");
        },
        function (error) {
          uni.showToast({
            title: "安装失败",
            duration: 1500,
            icon: "none",
          });
        }
      );
    },
    downLoad() {
      const download = plus.downloader.createDownload(
        "https://sj.zol.com.cn/down.php?softid=48928&subcateid=73&site=11&server=111&w=0&m=0&downloader=1",
        {
          method: "POST",
          data: "{name:'剧多分'}",
        },
        (d, status) => {
          if (status == 200) {
            this.filename = d.filename;
            this.onInstall();
          } else {
            console.log("Download failed: " + status);
          }
        }
      );
      download.start();
      download.addEventListener(
        "statechanged",
        (d, status) => {
          this.percent = d.downloadedSize / d.totalSize;
          this.drawCircle(this.percent);
        },
        false
      );
    },
    onUpdate() {
      let platform = uni.getSystemInfoSync().platform;
      let appId = "com.maiyawx.playlet.mediumapp";
      if (platform == "android") {
        let brand = uni.getSystemInfoSync().brand
        if(brandMap[brand]){
            plus.runtime.openURL('market://details?id=' + appId);
        }else{
            this.downLoad();
        }
      } else {
        plus.runtime.launchApplication({
          action: `itms-apps://itunes.apple.com/app/${appId}`,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/styles/common");
/deep/ .u-popup__content {
  background-color: transparent;
}
.up-box {
  width: 542rpx;
  border-radius: 32rpx;
  background-color: #fff;
  padding: 40rpx;
  position: relative;
  .head-img {
    width: 542rpx;
    height: 252rpx;

    margin-top: -64rpx;
    margin-left: -40rpx;
  }
  .ver {
    font-size: 32rpx;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 140rpx;
    left: 40rpx;
  }
  .tip {
    margin-top: 24rpx;
    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #070b1c;
    }
    .text {
      font-weight: 400;
      font-size: 14px;
      color: rgba(7, 11, 28, 0.8);
      line-height: 20px;
      margin: 16rpx 0;
      display: inline-block;
    }
  }
  .progress {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 100rpx 0;
    .out-circle {
      box-shadow: 0px 4px 8px 0px rgba(67, 106, 243, 0.15);
    }
    .circle {
      transform: rotate(-90deg);
    }
    .ani {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      justify-content: center;
      align-items: center;
      margin-top: -10rpx;
      .plane {
        width: 80rpx;
        height: 80rpx;
        position: relative;
        animation: fly 0.5s linear alternate infinite;
      }
      .lines {
        width: 50rpx;
        justify-content: space-around;
        margin-top: -8rpx;
        position: absolute;
        bottom: 10rpx;
        .line {
          display: inline-block;
          width: 10rpx;
          height: 25rpx;
          position: absolute;
          top: 0;
          border-radius: 10rpx;
          overflow: hidden;
          &::after {
            border-radius: 10rpx;
            position: absolute;
            content: "";
            display: inline-block;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              rgba(137, 95, 255, 1) 0%,
              rgba(67, 106, 243, 1) 100%
            );
            animation: fire 1s infinite;
          }
          &.line-1 {
            left: 6rpx;
            &::after {
              animation-delay: 0s;
            }
          }
          &.line-2 {
            top: 8rpx;
            left: 20rpx;
            &::after {
              animation-delay: 0.5s;
            }
          }
          &.line-3 {
            left: 34rpx;
            &::after {
              animation-delay: 0.7s;
            }
          }
        }
      }
    }
    .tip {
      position: absolute;
      bottom: -52rpx;
      color: #436af3;
    }
  }
  .btns {
    .active-btn {
      height: 80rpx;
      border-radius: 16rpx;
    }
    .cancel-btn {
      color: #436af3;
      margin-top: 24rpx;
    }
  }
}
@keyframes fly {
  0% {
    top: 0;
  }
  100% {
    top: -10rpx;
  }
}
@keyframes fire {
  0% {
    top: -10rpx;
  }
  100% {
    top: 100%;
  }
}
</style>
